<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .abcd{
            background-color: #8d1eff;
        }
        .ab{
            background-color: #fff246;
        }
    </style>
    <script>
        function addli(){
            //加到哪里
          // var ool=document.getElementsByTagName("ol")[0];
          //  alert(ool.innerHTML);

            var oli1=document.getElementsByTagName("li")[0];
            //加什么？
            var oli=document.createElement("li");
            var txt=document.createTextNode("d");
           // ool.appendChild(oli);
            oli1.parentNode.insertBefore(oli,oli1);
            oli.appendChild(txt);
        }

        function delli() {
            var oli1=document.getElementsByTagName("li")[0];
            oli1.parentNode.removeChild(oli1);
        }
        function addattr(){
            var oli=document.getElementsByTagName("li")[0];
            //oli.style.color="red";
            /*
            var attr=document.createAttribute("class");
             attr.value="abcd";
             oli.setAttributeNode(attr);
            */
            oli.setAttribute("class","abcd")
        }
        function upattr() {
            var oli=document.getElementsByTagName("li")[0];
            oli.setAttribute("class","ab")
        }
    </script>
</head>
<body>
<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>
<button onclick="addli()">添加一行</button>
<button onclick="delli()">删除一行</button>
<button onclick="addattr()">添加属性</button>
<button onclick="upattr()">修改属性</button>

</body>
</html>